<template>
	<view class="home">
		<custom-navbar title="招聘列表" :show-back="true" @back="handleBack" />

		<view class="content " :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="search mb37 p0030">
				<view class="box fcc mb30 p016016">
					<up-search shape="square" placeholder="请输入搜索职位" v-model="keyword" :showAction="false"></up-search>
					<up-button type="primary" @click="getProductName()"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx 10rpx 10rpx 10rpx;"
						text="确定"></up-button>
				</view>

			</view>

			<view class="supplyList  p0030">
				<view class="item p30 mb20" v-for="(item,index) in  homeData" :key="index" @click="handledetails(item)">
					<view class="fcsb mb18">
						<view class="f36bc0">{{item.position_name}}</view>
						<view class="f36bcFF0C10">{{item.salary_range_text}}</view>
					</view>
					<view class="f225c0 mb18">{{item.enterprise_id_text}}·{{item.enterprise_size_text}}人
					</view>
					<view class="fc mb30">
						<view class="condition mr10 p0020">
							<view>{{item.province_id_text}}</view>
						</view>
						<view class="condition mr10 p0020">
							<view>{{item.work_experience_text}}</view>
						</view>
						<view class="condition mr10 p0020">
							<view>{{item.education_requirement_text}}</view>
						</view>
					</view>
					<up-line></up-line>
					<view class="f22c9 mt30">{{item.create_time}}发布</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		lists
	} from '@/api/talents'
	import {
		getClassification
	} from '@/api/login'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 获取list列表
	const homeData = ref([])
	const page = ref(1)
	const limit = ref(10)
	const keyword = ref('')

	const getSupplyLists = async () => {
		const parmas = {
			lang_code: 'zh',
			limit: limit.value,
			page: page.value,
			keyword: keyword.value
		}
		try {
			const Res = await lists(parmas)

			if (Res.code = 200) {
				homeData.value = Res.data.data
			}
			// console.log(Res)
		} catch (error) {
			console.error('获取供需列表失败:', error)
		}
	};

	getSupplyLists()
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	// 搜索名称
	const getProductName = () => {
		getSupplyLists()
	}
	const handledetails = (item) => {
		console.log(item, 1111)
		uni.navigateTo({
			url: `/pages/talents/position?recruitment_id=${item.recruitment_id}`
		});
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.search {
				width: 100%;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 16rpx 30rpx 24rpx 30rpx;

				.box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

			.classify {
				width: 100%;
			}

			.supplyList {
				.item {
					width: 100%;
					height: 300rpx;
					height: 300rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid;
					border-image: linear-gradient(61deg, rgba(57, 141, 251, 0), rgba(255, 255, 255, 1)) 1 1;

					.condition {
						// width: 90rpx;
						height: 44rpx;
						background: rgba(146, 146, 146, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #A1A1A1;
						line-height: 44rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
</style>